<template>
	<div>
		<com-header :title="title"></com-header>
		<com-content :hasHeader="true">
			<p>vuex的lon值:</p><input type="text" v-model="lon" />
			<p>vuex的lat值:</p><input type="text" v-model="lat" />
			<br />
			<button @click="modifyAction()">修改</button>
			<p>vuex的lon值:{{$store.state.lon}}</p>
			<p>vuex的lat值:{{$store.state.lat}}</p>
			<p>总和：{{count}}</p>
			<br />
			<button @click="actionsFn()">actions异步执行的函数,打印传入的值,调用mutations里的方法</button>
		</com-content>
	</div>
</template>

<script>
	import Vuex from 'vuex'
	//console.log(Vuex)
	
	export default {
		data(){
			return {
				title: "我的",
				lon: this.$store.state.lon,
				lat: this.$store.state.lat,
				count: this.$store.getters.count
			}
		},
		/*
		//将全局方法改为局部方法
		methods:{
			//触发actions
			modify(){
				this.$store.dispatch("modify",{
					lon:this.lon,
					lat:this.lat
				})
			},
			//触发mutations
			modify(){
				this.$store.commit("modify",{
					lon:this.lon,
					lat:this.lat
				})
			}
		}
		*/
		//等价于上面的方法
		methods: {
			...Vuex.mapActions({
				actionsFn:'actionsFn'
			}),
			...Vuex.mapMutations({
				modify:'modify'
			}),
			modifyAction(){
				this.modify({
					lon:this.lon,
					lat:this.lat
				})
			}
		}
	}
</script>

<style>
</style>